<template>
  <div class='login_container'>
    <div class='login_box'>
      <!-- 登录表单区域 -->
      <el-form :model='form'>
        <!-- 用户名 -->
        <el-form-item>
          <el-input placeholder='用户名' v-model='form.username' />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input placeholder='密码' show-password v-model='form.password' />
        </el-form-item>
        <!-- 记住我 -->
        <el-form-item>
          <el-checkbox label='记住我' class='rememberMe' v-model='form.rememberMe' />
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type='primary' @click='start'>登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: undefined,
        password: undefined,
        rememberMe: true
      }
    }
  },
  created() {
    // 填充账号密码
    this.fill()
  },
  methods: {
    start() {
      console.log(JSON.parse(JSON.stringify(this.form)))
      // 判断账号密码
      if (this.form.username === this.$store.state.username_login && this.form.password === this.$store.state.password_login) {
        // 正确
        // 存储本地
        if (this.form.rememberMe) {
          localStorage.setItem('login-username', this.form.username)
          localStorage.setItem('login-password', this.form.password)
        } else {
          localStorage.removeItem('login-username')
          localStorage.removeItem('login-password')
        }

        // 存储token
        this.$store.commit('LOG_IN', this.form.username)

        this.$router.push('./index')
      } else { // 错误
        this.$message.info('用户名或密码不正确')
      }
    },
    fill() {
      if (this.form.rememberMe) {
        this.form.username = localStorage.getItem('login-username')
        this.form.password = localStorage.getItem('login-password')
      }
    }
  }
}
</script>
<style scoped>

.login_container {
  background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
  /*background-image: url("../images/bg_login.png");*/
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.login_box {
  width: 500px;
  height: 350px;
  /* background-color: #fff; */
  background-color: #2e527bb3;
  border-radius: 5px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.el-form {
  padding: 32px;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.el-button {
  width: 100%;
}

.code {
  width: 45%;
}

img {
  /* style="width: 100px; height: 30px; margin-left:5px;vertical-align: middle;" */
  display: line-inline;
  width: 45%;
  height: 28px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 3px;
}

.rememberMe {
  color: #fff;
}
</style>
